import router, { asyncRoutes } from './router'
import store from './store'
// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'
// 导入设置页面标题的模块
import getPageTitle from '@/utils/get-page-title'

// 定义白名单
const whiteList = ['/login', '/404']

// 前置导航守卫
router.beforeEach(async(to, from, next) => {
  // 设置页面标题
  document.title = getPageTitle(to.meta.title)

  NProgress.start()

  // 获取token
  const token = store.state.user.token
  // console.log(token)
  // 判断token 是否存在
  if (token) {
    // 访问的是否是登录页面
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      // await store.dispatch('user/getUserInfo')
      // 1.先判断有没有用户信息（第一次访问时，用户信息已经存到Vuex 中，可以用Vuex中取到用户信息进行判断）
      // 2.没有用户信息，需要获取用户信息（权限信息），获取到以后存到 Vuex 中
      if (!store.getters.userId) {
        const menus = await store.dispatch('user/getUserInfo')

        // 3.使用后端返回的权限信息和本地提前预置的动态路由表进行对比筛选，筛选出当前用户有权访问的菜单
        // 4.将筛选好的用户有权访问的路由动态添加到路由对象中（addRoutes）

        const filterRoutes = asyncRoutes.filter(item => {
          const routeName = item.children[0].name
          return menus.includes(routeName)
        })
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })

        // 通过addaroutes 添加的路由是存放到内存中的，不会对代码造成影响
        router.addRoutes(filterRoutes)
        // 将动态路由添加后将动态路由存放到 Vuex 中
        store.commit('permission/setRoutes', filterRoutes)

        // 之前没有这些动态路由，使用 addRoutes 添加后才有
        // 需要手动告诉路由要跳转到哪个新增里面去
        next({
          path: to.path
        })
      }
      // 5.直接放行 next（）
      // 6.如果有用户信息，直接放行
      next()
      NProgress.done()
    }
  } else {
    // 判断访问的路径是否在白名单
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 后置路由守卫
router.afterEach((to, from) => {
  // 隐藏进度条
  NProgress.done()
})
